<template>
  <div class="editable-element-chart" :class="{ 'lock': elementInfo.lock }" :style="{
    top: elementInfo.top + 'px',
    left: elementInfo.left + 'px',
    width: elementInfo.width + 'px',
    height: elementInfo.height + 'px',
  }">
    <div class="rotate-wrapper" :style="{ transform: `rotate(${elementInfo.rotate}deg)` }">
      <div class="element-content" :style="`
        background-color: ${elementInfo.fill};
        border-radius: ${elementInfo.borderRadius}px;
        outline: ${elementInfo.outline?.width}px ${elementInfo.outline?.style} ${elementInfo.outline?.color}
      `" v-contextmenu="contextmenus" @mousedown="$event => handleSelectElement($event)"
       @dblclick="openDataEditor()">
        <!-- <ElementOutline :width="elementInfo.width" :height="elementInfo.height" :outline="elementInfo.outline" /> -->
       <div class="draw" v-if="chart3d=='3D'">
         <IconMove/>
       </div>
       <component :is="currentComponent" :width="elementInfo.width" :height="elementInfo.height"
          :type="elementInfo.chartType" :data="elementInfo.data" :options="elementInfo.options" :id="elementInfo.id"
          :themeColor="elementInfo.themeColor" :gridColor="elementInfo.gridColor" :attribute="elementInfo.attribute" 
          :filters="elementInfo.filters" :legend="elementInfo.legend || ''">
        </component>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
import { PPTChartElement } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types'
import emitter, { EmitterEvents } from '@/utils/emitter'

import ElementOutline from '@/views/components/element/ElementOutline.vue'
import Chart from './AntvChart.vue'
import LineChart from './AntvLineChart.vue'
// import PieChart from './AntvPieChart.vue'
import BubbleChart from './AntvBubbleChart.vue'
import PieChart from './PieChart.vue'
import RadarChart from './AntvRadarChart.vue'
import TwMapChart from './AntvMapChart.vue'
import ThMapChart from './Antv3dMapChart.vue'
import { message } from 'ant-design-vue'

export default defineComponent({
  name: 'editable-element-chart',
  components: {
    ElementOutline,
    Chart,
    LineChart,
    PieChart,
    BubbleChart,
    RadarChart,
    TwMapChart,
    ThMapChart
  },
  props: {
    elementInfo: {
      type: Object as PropType<PPTChartElement>,
      required: true,
    },
    selectElement: {
      type: Function as PropType<(e: MouseEvent, element: PPTChartElement, canMove?: boolean) => void>,
      required: true,
    },
    contextmenus: {
      type: Function as PropType<() => ContextmenuItem[]>,
    },
  },
  setup(props) {
    const chart3d = computed(() => {
      if(props.elementInfo.data.type.type) {
        return props.elementInfo.data.type.type.split('').slice(0, 2).join('')
      } else {
        return ''
      }
    })
    const currentComponent = computed(() => {
      const cmap = {
        'bar': Chart,
        'line': LineChart,
        'pie': PieChart,
        'scatter': BubbleChart,
        'fold': RadarChart,
        '2dmap': TwMapChart,
        '3dmap': ThMapChart,
      }
      return cmap[props.elementInfo.chartType] || null
    })
    const handleSelectElement = (e: MouseEvent) => {
      if (props.elementInfo.lock) return
      e.stopPropagation()

      props.selectElement(e, props.elementInfo)
    }

    const openDataEditor = () => {
      if(props.elementInfo.data.data.length == 0 || props.elementInfo.data.type.intervalLine || props.elementInfo.data.type.classification) {
        message.info('该类型图表暂时不支持双击修改！')
        return
      }
      emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
    }

    return {
      handleSelectElement,
      openDataEditor,
      currentComponent,
      chart3d
    }
  },
})
</script>

<style lang="scss" scoped>
.element-content {
  &:hover {
    .draw {
      display: block;
      background: rgba(255, 255, 255, .3);
    }
  }
}
.draw {
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 999;
  text-align: center;
  line-height: 50px;
  display: none;
  .i-icon {
    color: #fff;
    font-size: 22px;
  }
}
.editable-element-chart {
  position: absolute;

  &.lock .element-content {
    cursor: default;
  }
}

.rotate-wrapper {
  width: 100%;
  height: 100%;
}

.element-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: move;
}
</style>
